<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 188px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\sum_{y}^{x}" data-type="largeScaleComputation" data-poupe=""
				 data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/dx_0_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\prod_{y}^{x}" data-type="largeScaleComputation" data-poupe=""
				 data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/dx_0_2.png"></div>
<!--			<div class="equation-top-dom-item" @click="selectItem" data-code="\coprod_{y}^{x}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_0_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\bigcup_{y}^{x}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_0_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\bigcap_{y}^{x}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_0_5.png"></div>-->
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 388px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\intop_{y}^{x}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_1_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\int_{y}^{x}" data-type="largeScaleComputation" data-poupe=""
				 data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/dx_1_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\iint_{y}^{x}" data-type="largeScaleComputation" data-poupe=""
				 data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/dx_1_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\iiint_{y}^{x}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_1_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\oint_{y}^{x}" data-type="largeScaleComputation" data-poupe=""
				 data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/dx_1_5.png"></div>
<!--			<div class="equation-top-dom-item" @click="selectItem" data-code="\oiint_{y}^{x}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_1_6.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\oiiint_{y}^{x}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_1_7.png"></div>-->
		</div>

		<div class="equation-top-item-bg" style="opacity: 1; width: 174px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\lim_{x\to\infty}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_2_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\lim_{n}" data-type="largeScaleComputation" data-poupe=""
				 data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/dx_2_2.png"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 266px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\frac{dx}{dy}" data-type="largeScaleComputation" data-poupe=""
				 data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/dx_3_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\pdiff {x} {y}" data-type="largeScaleComputation"
				 data-poupe="" data-key="" style="height: 60px;"><img class="equation-top-dom-item-image"
																	  src="../../../assets/images/latex/dx_3_2.png"></div>
		</div>

	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>

<style scoped lang="scss">

</style>
